console.log("学业坊页面脚本已加载");

document.addEventListener('DOMContentLoaded', () => {
    // “学业坊”页面的交互逻辑将在这里初始化
    renderPortfolioCategories();
    renderMovableTypes();
    renderPortfolioSubnav();
});

function renderPortfolioCategories() {
    const container = document.getElementById('portfolio-categories');
    if (!container) return;
    container.innerHTML = '';

    portfolioData.categories.forEach(category => {
        // 分类标题
        const section = document.createElement('section');
        section.className = 'portfolio-category-section';
        section.innerHTML = `
            <h2 class="section-title">${category.name}</h2>
            <p class="section-subtitle">${category.description}</p>
            <div class="portfolio-gallery"></div>
        `;
        const gallery = section.querySelector('.portfolio-gallery');
        category.items.forEach(item => {
            const itemDiv = document.createElement('div');
            itemDiv.className = 'portfolio-item';
            itemDiv.innerHTML = `
                <a href="${item.link}" target="_blank" class="portfolio-link" style="text-decoration:none;">
                    <div class="book-cover">
                        <h3 class="book-title">${item.title}</h3>
                    </div>
                </a>
                <div class="item-details">
                    <p>${item.description}</p>
                </div>
            `;
            gallery.appendChild(itemDiv);
        });
        container.appendChild(section);
    });
}

function renderMovableTypes() {
    const container = document.querySelector('.movable-type-container');
    if (!container) return;

    // 清空占位符
    container.innerHTML = '';

    portfolioData.movableTypes.forEach(item => {
        const movableTypeLink = document.createElement('a');
        movableTypeLink.href = item.link;
        movableTypeLink.className = 'movable-type';
        movableTypeLink.innerHTML = `<span>${item.name}</span>`;
        container.appendChild(movableTypeLink);
    });
}

function renderPortfolioSubnav() {
    const subnav = document.getElementById('portfolio-subnav');
    if (!subnav) return;
    subnav.innerHTML = '';
    portfolioData.categories.forEach((cat, idx) => {
        const btn = document.createElement('button');
        btn.className = 'portfolio-subnav-btn' + (idx === 0 ? ' active' : '');
        btn.textContent = cat.name;
        btn.onclick = function() {
            document.querySelectorAll('.portfolio-subnav-btn').forEach(b => b.classList.remove('active'));
            btn.classList.add('active');
            // 滚动到对应分类区
            const section = document.querySelectorAll('.portfolio-category-section')[idx];
            if (section) {
                section.scrollIntoView({behavior: 'smooth', block: 'start'});
            }
        };
        subnav.appendChild(btn);
    });
}

// 宣纸纹理+墨迹动态背景（学业坊专用）
(function() {
  const canvas = document.getElementById('portfolio-bg-canvas');
  if (!canvas) return;
  const ctx = canvas.getContext('2d');
  let width = window.innerWidth;
  let height = window.innerHeight;
  function resize() {
    width = window.innerWidth;
    height = window.innerHeight;
    canvas.width = width;
    canvas.height = height;
  }
  resize();
  window.addEventListener('resize', resize);

  // 宣纸底纹
  const paperImg = new window.Image();
  paperImg.src = 'assets/images/texture-xuan-paper.jpg';
  // 若无宣纸图片可用淡色渐变+点状噪声模拟

  // 墨迹晕染点参数
  const blobs = Array.from({length: 5}, (_,i) => ({
    x: Math.random()*width,
    y: Math.random()*height,
    r: 90+Math.random()*120,
    dx: -0.08+Math.random()*0.16,
    dy: -0.08+Math.random()*0.16,
    alpha: 0.08+Math.random()*0.10,
    t: Math.random()*Math.PI*2
  }));

  function draw() {
    ctx.clearRect(0,0,width,height);
    const isNight = document.body.classList.contains('night-mode');
    // 宣纸底纹
    if (paperImg.complete && paperImg.naturalWidth) {
      ctx.globalAlpha = isNight ? 0.18 : 0.32;
      ctx.drawImage(paperImg, 0, 0, width, height);
      ctx.globalAlpha = 1;
    } else {
      // 渐变+噪声模拟
      const grad = ctx.createLinearGradient(0,0,0,height);
      grad.addColorStop(0, isNight ? '#232323' : '#f7f1e3');
      grad.addColorStop(1, isNight ? '#3a5a6c' : '#fffbe6');
      ctx.fillStyle = grad;
      ctx.fillRect(0,0,width,height);
    }
    // 墨迹晕染
    blobs.forEach(b => {
      ctx.save();
      ctx.globalAlpha = b.alpha * (isNight ? 1.5 : 1);
      const grad = ctx.createRadialGradient(b.x, b.y, b.r*0.2, b.x, b.y, b.r);
      grad.addColorStop(0, isNight ? '#3a5a6c' : '#b0a084');
      grad.addColorStop(1, 'rgba(58,90,108,0)');
      ctx.beginPath();
      ctx.arc(b.x, b.y, b.r, 0, Math.PI*2);
      ctx.closePath();
      ctx.fillStyle = grad;
      ctx.filter = 'blur(8px)';
      ctx.fill();
      ctx.restore();
    });
  }

  function animate() {
    blobs.forEach(b => {
      b.x += b.dx + Math.sin(b.t)*0.12;
      b.y += b.dy + Math.cos(b.t)*0.12;
      b.t += 0.006+Math.random()*0.003;
      if (b.x < -b.r) b.x = width+b.r;
      if (b.x > width+b.r) b.x = -b.r;
      if (b.y < -b.r) b.y = height+b.r;
      if (b.y > height+b.r) b.y = -b.r;
    });
    draw();
    requestAnimationFrame(animate);
  }
  animate();

  // 夜间模式切换时重绘
  const obs = new MutationObserver(draw);
  obs.observe(document.body, {attributes:true, attributeFilter:['class']});
})(); 